<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-right">
				<view class="enroll" @click="goEnroll">
					注册
				</view>
			</view>
		</view>
		<view class="logo">
			<image src="../../static/img/index/火@2x.png" mode=""></image>
		</view>
		<view class="main">
			<view class="title">
				登录
			</view>
			<view class="form">
				<input type="text" placeholder="用户名/邮箱" v-model="User" />
				<view class="password">
					<input type="text" :password="look" placeholder="密码" v-model="Password" />
					<view class="tip" @tap="change">
						<i class="iconfont icon-biyan" v-if="look"></i>
						<i class="iconfont icon-yanjing" v-if="!look"></i>
					</view>
				</view>
				<view class="forget">
					忘记密码
				</view>
			</view>
			<view class="submit" @click="login">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../common/js/request.js'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				flag: false,
				User: '',
				Password: '',
				err: '',
				look:true
			};
		},
		methods: {
			...mapActions([
				'changeUseraction',
				'changeavataraction',
				'changeidaction'
			]),
			goEnroll() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			async login() {
				this.flag = false
				this.User = this.User.trim()
				this.Password = this.Password.trim()
				if (this.User.length == 0 || this.Password.length == 0) {
					this.err == '用户名密码不能为空'
					this.flag = true
					return
				}
				var res = await request({
					url: '/signin',
					method: 'POST',
					data: {
						data: this.User,
						pwd: this.Password
					}
				})
				uni.setStorageSync('token', res.token)
				this.changeUseraction(res.data.user.name)
				this.changeavataraction(res.data.user.avatar)
				this.changeidaction(res.data.user.id)
				// console.log(res.data);
				if (res.data.status == 400) {
					this.err = '密码或账号错误'
					return this.flag = true
				}
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			change() {
				this.look = !this.look
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: var(--status-bar-height) 56rpx 0;
	}

	.top-bar {
		height: 88rpx;
		background: #FFF;

		.top-bar-right {
			float: right;
			padding: 20rpx;
			padding-right: 0;

			.enroll {
				font-size: 36rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 500;
			}


		}
	}


	.logo {
		height: 92rpx;
		padding: 80rpx 222rpx 55rpx;

		image {
			width: 192rpx;
			height: 92rpx;
		}
	}

	.main {
		.title {
			font-size: 56rpx;
			color: #272832;
			letter-spacing: 0;
			font-weight: 500;
		}

		.form {
			input {
				border-bottom: 2rpx solid #e5e5e5;
				margin-top: 68rpx;
				padding-bottom: 18rpx;
				font-size: 36rpx;
			}
			.password{
				position: relative;
				.tip{
					position: absolute;
					top: 10rpx;
					right:0 ;
				}
			}
			.tips {
				margin-top: 10rpx;
				float: left;
				color: $uni-color-error;
				font-size: 30rpx;
			}

			.forget {
				margin-top: 10rpx;
				float: right;
				color: #999;
				font-size: 30rpx;
			}
		}

		.submit {
			margin: 116rpx 56rpx 0;
			width: 520rpx;
			line-height: 96rpx;
			text-align: center;
			background: #FFE431;
			box-shadow: 0rpx 50rpx 32rpx -36rpx rgba(255, 228, 49, 0.4);
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #272832;
			letter-spacing: 0;
			font-weight: 500;
		}
	}
</style>
